

import React, { memo } from 'react';


import { useSelector, shallowEqual } from 'react-redux';
import ThemeHeaderNoraml from '@/components/theme-header-normal';
import sty from './sty.module.css';
import ItemArtist from './child/artist-item';
import AlphasList from './child/alpha-list';

const Artist = () => {
  const { currentType, artistList } = useSelector(state => ({
    currentType: state.getIn(['artist', 'currentType']),
    artistList: state.getIn(['artist', 'artistList'])
  }), shallowEqual)


  return <div className={sty.artistWrap}>
    <ThemeHeaderNoraml title={currentType.name} />
    <AlphasList />
    <div className={sty.artistList}>
      {
        artistList.length > 0 && artistList.map((v, i) => <ItemArtist key={v.id} info={v} index={i} />)
      }
    </div>
  </div>
}
export default memo(Artist)